<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{$vote.title}</title>
  <meta charset="UTF-8">
  <meta name="viewport" content=" initial-scale=1.0,user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta name="format-detection" content="telephone=no"/>
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="__PUBLIC__/Style/Common/js/GH.1.1.js"></script>
  <meta name="viewport" content="width=device-width,  initial-scale=1.0, user-scalable=0, minimum-scale=1.0,  maximum-scale=1.0" />

  <style>
    *{
      margin:0px;
      padding:0px;
      font-size: 12px;
      font-family:'microsoft yahei','宋体','tahoma',​'arial',​'simsun',​'sans-serif' ;
      color: #fff;
    }
    
    img{border: none;}
    li{list-style: none;}
    .cle{clear:both;}
    body { background: #ccc; }
    a{ color: #fff;text-decoration: none; border: none;}
    a:hover{color:#fff;cursor: pointer;} 
    .tit {
       font-size: 1.4em;
    } 
    .tit:after {
       content: "";
       display: block;
       clear: both;
    }
    .max-box {
      max-width: 640px;
      margin: 0 auto;
      padding-bottom: 10px;
      background: #630100;
    }
    .list:after {
      content: "";
      display: block;
        clear: both;
    }
    .list img {
       width: 100%;
       float: left;
       height: 200px;
       border: 7px solid #D35128;
       box-sizing: border-box;
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
    }
 
    .list-box:after{
       content: "";
       display: block;
       clear: both;
    }
    .tit-min {
       margin: 1em 0 0  0;

       margin-bottom: 5px;  
       font-size: 1.4em;
       color: #D35128;
    }
    #maxnum {
       color: #D35128;
       font-size: 1em;
       font-weight: normal;
    }
    .list p {
       height: 30px;
       line-height: 30px;
       margin-top: 1em;
       float: left;
       width: 100%;
       position: relative;
    }
    .list p input {
        margin-left: 10px;
    }
    .list {
      margin-top: 10px;
      width: 45%;
      float: left;
    }
    .per {
       width: 100%;
       height: 0px; 
       float: left;     
       overflow: hidden;
    }
    .per .per-left {
      display: block;
       width: 50%;
       float: left;
       position: relative;    
    }
    .per-left p {
       position: absolute;
       left: 0;
       top: -10px;
       width: 100%;
       height: 10px;
       border-radius: 5px;
       background: #757070;  
       z-index:1;
    }
    .per span {
       position: absolute;
       left: 0;
       top: 2px;
       width: 0%;
       display: block;
       height: 10px;
       border-radius: 5px;
       background: #459605;   
       z-index:2;
       -webkit-transition:width .5s linear;
    }
    .per b u {
       color: #757070;
       text-decoration: none;
    }
    .per b {
       float: right;
       font-weight: 500;
       color: #757070;
    }
    .per b i {
      font-style: normal;
    }
    .per s {
     display: none;
    }
    .list p input {
      display: none;
    }
    .list p span {
      display: block;
      width: 20px;
      height: 20px;
      background: #fff;
      position: absolute;
      left: 6px;
      top: 4px; 
      border-radius: 50%;
    }
    .list p span.inp:after {
      content: '';
      position: absolute;
      left: 3px;
      top: 3px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: url();
      background-size: 100% 100%;
    }
    
    .list p b {
      font-weight: normal;
      display: block;
      margin-left: 30px;
      height: 30px;
      line-height: 30px;
      float: left;
    }
    .box-img {
      width: 100%;
    }
    #forms {
      margin: 0 20px;
    }
    .tit-box {
        position: relative;
        margin-top: 45px;
        background: #350201;
        padding: 10px 20px;
    }
    .tit-box:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -36px;
        border: 0 dashed transparent;
        width: 100%;
        height: 0;
        font-size: 0;
        border-width: 10px;
        box-sizing: border-box;
        border-bottom: 26px solid #8c2819;
    }
    .tit span {
       display: block;
       float: left;
       border-bottom: 4px solid #C20000;  
       font-size: 1.2em;  
       padding-left: 28px;
       position: relative;
    }
    .tit span:after {
       content: "";
       width: 25px;
       height: 25px;
       background: url();
       background-size: 100% 100%;    
       position: absolute;
       left: 0;
       top: 0px;
    }
    .list-box:after {
      content: "";
      display: block;
      clear: both;
    }
    .list-box .list:nth-of-type(2n) {
      margin-right: 10%;
    }
    @media screen and (max-width: 400px) {
         .list {
           width: 100%;
         }
     }
    div.list-box {
       padding-bottom: 170px;
       background-image: url("");
       background-position: left bottom;
       background-repeat: no-repeat;
       background-size: 100% 290px;
    }
    .bottom-b {
       position: absolute;
       left: 50%;
       bottom: 41px;
       margin-left:  -5em;
       width: 10em;
       height: 10em;
       background-image: url("");
       background-size: 100% 100%; 
    }
    .bottom-b:hover {
       background-image: url("");
    }
  </style>
</head>
<body>

    <div class="max-box-top">
       <div class="max-box">
       <img src="{$vote.pic}" class="box-img" alt="" />
          <form action="__CONTROLLER__/saveRecord" method="post" id="forms">
          <input type="hidden" name="open_id" value="{$open_id}">
          <input type="hidden" name="select_items" value="{$vote.select_items}">
          <div class="tit-box">
            <div class="tit"><span>{$vote.title}</span></div>
            <div class="tit-min">描述内容:{$vote.desc}，最多可选择<b id="maxnum">{$vote.select_items}</b></div>           
          </div>
          <input type="hidden" name="form_vote_id" value="{$vote.id}">
              <div class="list-box tit-box">
                <foreach name="vote.answer" item="v">
                   <div class="list">
                       <img src="{$v.pic}" alt="" />
                       <p>
                        <span></span><input type="{$vote.select_options}" name="selected[]"  class="set-input" value="{$v.id}"><b>{$v.answer}</b>
                       </p>
                       <div class="per">
                        <div class="per-left"><span class="{$v.id}"></span><p></p></div><b><u>100%</u>(<i>2</i><s></s>)</b>
                       </div>
                   </div>
                </foreach>
                <div class="bottom-b sub"></div>
              </div>              
          </form>   
       </div>
    </div>  
    <script>  
      $(function(){
        $(".list img").click(function(){
          if($("#maxnum").html()=="1"){
             $(".list input").prop("checked",false) ;
             $(".list span").removeClass("inp");     
           }
          if($(this).parents(".list").find("input").is(":checked")){
            $(this).parents(".list").find("input").prop("checked",false) ;
            $(this).parents(".list").find("span").removeClass("inp");
          }else{
            $(this).parents(".list").find("input").prop("checked",true) ;
            $(this).parents(".list").find("span").addClass("inp");
          }
        });       
        $(".sub").click(function(){     
          if($(".max-box").find(".set-input:checked").size()=="0"){
            GH.showMessage("请至少选择一个哦！");
          }else{
            if($("#maxnum").html()>=$(".max-box").find(".set-input:checked").size()){
                    var ourl="__CONTROLLER__/saveRecord";
                    var data=$("#forms").serialize();
                        $.ajax({
                             type: "POST",
                             url: ourl,
                             data: data,
                             success: function(msg){
                               if(msg.error=="0"){
                                 GH.showMessage(msg.msg);
                                   for(var i in msg.count) { 
                                     console.log(i);
                                     console.log($("."+i).parents(".per").find("i").html());
                                     $("."+i).parents(".per").find("i").html(msg.count[i]);
                                     $("."+i).parents(".per").find("s").html(msg.total);
                                   }
                                   $(".per").each(function(i) {
                                     $(".per").css({"height":"15px"});
                                     var oW=parseInt($(".per").eq(i).find("i").html()/$(".per").eq(i).find("s").html()*100);
                                     $(this).find("span").css({"width":oW+"%"});
                                     $(this).find("u").html(oW+"%");
                                   })
                               } else {
                                 GH.showMessage(msg.msg);
                               }
                             }
                          });
                  } else {
                     GH.showMessage("只能选择"+$("#maxnum").html()+"个哦！");
                  }
          }                 
        })      
      })    
    </script>
<!--      <script>
     $(function(){
    	 if(isWeiXin()){}else{
    	        document.write("<style>.inner{margin-top: 20px;}body{line-height:1.6;font-family:'Helvetica Neue',Helvetica,'Microsoft YaHei',Arial,Tahoma,sans-serif;}body,h1,h2,h3,h4{margin:0;}a img{border:0;}body{background-color: #e1e0de;}.page_msg .msg_content h4{font-weight: 400;color: #000000;}.page_msg{text-align:center;}.icon80_smile{background-image: url('');width: 80px;height: 80px;display: inline-block;}</style><div class='page_msg'><div class='inner'><span class='msg_icon_wrp'><i class='icon80_smile'></i></span><div class='msg_content'><h4>请在微信客户端打开链接</h4></div></div></div>");
    	      }
     })
	    function isWeiXin(){
	      var ua = window.navigator.userAgent.toLowerCase();
	      if(ua.match(/MicroMessenger/i) == 'micromessenger'){
	      return true;
	      }else{
	      return false;
	      }
	    }
  </script> -->
</body>
</html>